/**
 * 商品组件
 * 写好这个组件 很有压力
 */
import React, { useState } from 'react'
import { View, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import Price from '@/components/Price'
import cls from 'classnames'
import Flyway from '@/components/Flyway'

import './index.scss'
import { Stepper } from '../Stepper'
import { GoodsViewEle } from './goodView'
import { ImageEle } from '../Image'
export enum Direction {
  ROW,
  COLUMN
}

export interface IGoodsProps {
  id: number,
  direction: Direction
  title: string
  price: number
  oldPrice?: number
  discount?: number
  img: string,
  number: number,
  imgRender?: () => React.ReactElement
  descRender?: () => React.ReactElement
  desc?: string
  onAdd?: (num: number) => void
  customStyle?: React.CSSProperties
  readonly?: boolean

}

export const GoodEle: React.FC<IGoodsProps> = ({
  direction = Direction.ROW,
  readonly = false,
  ...rest
}) => {

  const isRow = direction === Direction.ROW
  const isCol = direction === Direction.COLUMN
  const [visible, setVisible] = useState<boolean>(false)
  const [point, setPoint] = useState()
  const [viewVis, setViewVis] = useState<boolean>(false)

  return (
    <React.Fragment>
      <View
        className={cls("xxm-goods-ele", {
          'xxm-goods-ele--row': isRow,
          'xxm-goods-ele--col': isCol,
        })} style={{ ...rest.customStyle }}


      >
        <View className={cls("xxm-goods-ele__img", {
          'xxm-goods-ele__img--col': isCol
        })}

          onClick={() => {
            setViewVis(true)
          }}
        >
          {
            rest.imgRender && typeof rest.imgRender === 'function' ?
              rest.imgRender() :
              <ImageEle src={rest.img} />
          }
        </View>
        <View className="xxm-goods-ele__content">
          <View className="xxm-goods-ele__title xxm-ellipsis">{rest.title}</View>
          <View className="xxm-goods-ele__desc">{
            rest.descRender && typeof rest.descRender === 'function' ?
              rest.descRender() : rest.desc
          }</View>
          <View className="xxm-goods-ele__pricebox">
            <View className="xxm-goods-ele__price">
              <Price price={rest.price} type={'sale'}></Price>
              {isCol && <View></View>}
              <Price price={rest.oldPrice} type={'lineation'}></Price>
              {
                rest.discount &&
                <View className="xxm-goods-ele__dis">{rest.discount}折</View>
              }
              {
                readonly && rest.number ? <View className="xxm-goods-ele__number xxm-goods-ele__add">x{rest.number}</View> :
                  <View className="xxm-goods-ele__add " >

                    <View id={`fly${rest.id}`} className='position'></View>
                    <Stepper
                      value={rest.number}
                      // asyncChange
                      onChange={async (type, num, e) => {
                        const ans = await rest.onAdd(num)
                        if (type === 'plus' && ans) {
                          const query = Taro.createSelectorQuery()
                          query.select(`#fly${rest.id}`).boundingClientRect()
                          query.selectViewport().scrollOffset()
                          query.exec(function (res: any) {
                            setPoint([res[0].left, res[0].top])
                            setVisible(true)
                          })
                        }
                        //  }
                      }}
                    />
                  </View>
              }
            </View>
          </View>
        </View>
        {visible && <Flyway start={point} onComplete={() => setVisible(false)} />}

      </View>
      {viewVis && <GoodsViewEle
        {...rest}
        readonly={readonly}
        vis={viewVis}
        onClose={
          () => {
            console.log('ggggxx')
            setViewVis(false)
          }} />
      }
    </React.Fragment>
  )
}
